import React from 'react'
import {DataTable} from 'primereact/datatable'
import {Column} from 'primereact/column'

class AssetsData extends React.Component{
  constructor(){
    super()

    this.state={
      assets:[
        {token: '1', assets: '2', value:'3', price:'4'},
        {token: '1', assets: '2', value:'3', price:'4'},
        {token: '1', assets: '2', value:'3', price:'4'},
        {token: '1', assets: '2', value:'3', price:'4'},
        {token: '1', assets: '2', value:'3', price:'4'},
        {token: '1', assets: '2', value:'3', price:'4'},
        {token: '1', assets: '2', value:'3', price:'4'},
        {token: '1', assets: '2', value:'3', price:'4'}
      ]
    }
  }

  render(){
    return (
      <DataTable value={this.state.assets}>
        <Column field="token" header="Token" />
        <Column field="assets" header="Assets" />
        <Column field="value" header="Value" />
        <Column field="price" header="Price" />
      </DataTable>
    )
  }
}

class Assets extends React.Component{
  constructor(){
    super()
    
    this.state={
      assets:{
        value:'$7.44',
      },
      delegate:{
        value:1.00
      }
    }
  }
  render(){
    return (
      <div className="p-g">
        <div className="p-g-12" style={{fontSize:'1.2rem'}}>
          <p style={{fontSize:'1.2rem'}}>我的资产</p>
        </div>
        <div className="p-g-2" style={{fontSize:'1.4rem'}}>
          {this.state.assets.value}
        </div>
        <div className="p-g-2" style={{fontSize:'1.4rem'}}>
          已抵押：{this.state.delegate.value}
        </div>

        <div className="p-g-12">
          <AssetsData />
        </div>
      </div>          
    )
  }
}

export default Assets